import * as echarts from '../../ec-canvas/echarts';

const app = getApp();

function setOption(chart,title,subtitle,dataXList,dataYList) {
    var option = {
        title:{
            show:true,
            text:title,
            textStyle:{
                color:'#fff',
                fontSize:12
            },
            subtext:subtitle,
            subtextStyle:{
                color:'#fff',
                fontSize:12
            },
            left:'5%'
        },
        backgroundColor: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 1,
            y2: 0,
            colorStops: [{
                offset: 0, color: '#ffb34e' // 0% 处的颜色
            }, {
                offset: 1, color: '#ff8971' // 100% 处的颜色
            }],
            globalCoord: false // 缺省为 false
        },
        color: ["#fff"],
        textStyle: {
            color: '#fff'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            containLabel: false,
            left:'10%',
            bottom:'20%',
            top:'25%',
            right:'10%'

        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: dataXList,
            axisLine:{
                lineStyle:{
                    color:'#fff'
                }
            },
            offset:10,
            axisLabel:{
                align:'left'
            }
        },
        yAxis: {
            x: 'center',
            type: 'value',
            splitLine: {
                lineStyle: {
                    color: ['#fff'],
                    opacity:0.5
                }
            },
            axisLine:{
                show:false
            },
            axisTick:{
                show:false
            }

        },
        series: [{
            name: 'A商品',
            type: 'line',
            data: dataYList,
            symbolSize: 8,//拐点大小
        }]
    };
    chart.setOption(option);
}

Page({


    onReady: function () {
        // 获取组件
        this.ecComponent = this.selectComponent('#mychart-dom-line');
    },

    data: {
        ec: {
            // 将 lazyLoad 设为 true 后，需要手动初始化图表
            lazyLoad: true
        },
        isLoaded: false,
        isDisposed: false,
        title:'',
        subtitle:'',
        dataXList:[
            {value:''},
        ],
        dataYList:[
            {value:''},
        ]
    },
    titleInput: function (e) {
        this.setData({
            title: e.detail.value
        });
        this.init();

    },
    subTitleInput: function (e) {
        this.setData({
            subtitle: e.detail.value
        });
        this.init();

    },
    dataXItem(e){
        console.log(e);
        let value=e.detail.value;
        let index=e.target.dataset.index;
        this.data.dataXList[index].value=value;
        console.log(this.data.dataXList);
        this.init();
    },
    addXData(){
        let dataXList=this.data.dataXList;
        dataXList.push({value:''});
        this.setData({
            dataXList: dataXList
        });
        console.log(dataXList)
    },
    dataYItem(e){
        console.log(e);
        let value=e.detail.value;
        let index=e.target.dataset.index;
        this.data.dataYList[index].value=value;
        console.log(this.data.dataYList);
        this.init();
    },
    addYData(){
        let dataYList=this.data.dataYList;
        dataYList.push({value:''});
        this.setData({
            dataYList: dataYList
        });
        console.log(dataYList)
    },
    // 点击按钮后初始化图表
    init: function () {
        this.ecComponent.init((canvas, width, height) => {
            // 获取组件的 canvas、width、height 后的回调函数
            // 在这里初始化图表
            const chart = echarts.init(canvas, null, {
                width: width,
                height: height
            });
            setOption(chart,this.data.title,this.data.subtitle,this.data.dataXList,this.data.dataYList);

            // 将图表实例绑定到 this 上，可以在其他成员函数（如 dispose）中访问
            this.chart = chart;

            this.setData({
                isLoaded: true,
                isDisposed: false
            });

            // 注意这里一定要返回 chart 实例，否则会影响事件处理等
            return chart;
        });
    },

    dispose: function () {
        if (this.chart) {
            this.chart.dispose();
        }

        this.setData({
            isDisposed: true
        });
    }
});

